import React, { Component } from "react";
import QueueAnim from "rc-queue-anim";
import { Table, message, Button, Modal } from "antd";
import TagSelect from "@/components/TagSelect/TagSelect";
import PushedTab from "@/components/DetailTabs/PushedTab";
import { connect } from "dva";

const { confirm } = Modal;
@connect(({ add }) => ({ add: add }))
@connect(({ draftlist }) => ({ draftlist }))
class DraftList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showSiteVisible: false, //显示推稿站点变量
      showPushExplainVisible: false, //显示推稿说明变量
      pageSize: 10, //表格数据当前页显示条数
      currentPage: 1, //表格数据当前页码
      category: "文章", //分类
      categoryId: 1, //分类id
      keyword: "", //搜索关键词
      search_type: 1, //搜索类型
      create_time: "1970-01-01 00:00:00", //初始查询全部时间
      tableLoading: true, //表格数据加载效果
      showDetailVariable: true, //详情展示页变量
      tabKey: "1", //详情页tab页的key
      statistivarable: false
    };
  }
  componentDidMount() {
    this.getTableData();
  }
  // 获取表格数据
  getTableData = async () => {
    this.setState({
      tableLoading: true
    });
    const { categoryId, currentPage, searchType, pageSize, create_time, keyword } = this.state;
    const result = await this.props.dispatch({
      type: "draftlist/getCreateDraftList",
      payload: {
        content_type: categoryId,
        create_time: create_time,
        keyword: keyword,
        search_type: searchType,
        page: currentPage,
        per_page: pageSize,
        level: 1
      }
    });
    if (result) {
      this.setState({
        tableLoading: false
      });
    }
  };
  // 类别切换
  categoryChange = data => {
    this.setState(
      {
        tableLoading: true,
        keyword: "",
        category: data.category_name,
        categoryId: data.category_id
      },
      () => {
        this.getTableData();
      }
    );
  };
  // 时间选择切换
  selectedTimeChange = timer => {
    this.setState(
      {
        tableLoading: true,
        create_time: timer
      },
      () => {
        this.getTableData();
      }
    );
  };
  // 搜索
  handleSeachButton = data => {
    this.setState(
      {
        tableLoading: true,
        categoryId: data.category_id,
        keyword: data.searchKeyword,
        searchType: data.searchType,
        category: data.category_name
      },
      () => {
        this.getTableData();
      }
    );
  };

  // 表格显示条数切换
  pageSizeChange = (current, size) => {
    this.setState(
      {
        pageSize: size,
        currentPage: current
      },
      () => {
        this.getTableData();
      }
    );
  };
  // 当前页面变化
  currentPageChange = (page, pageSize) => {
    console.log(page, pageSize);
    this.setState(
      {
        currentPage: page
      },
      () => {
        this.getTableData();
      }
    );
  };
  // 跳转值推送数据
  showPushedData = row => {
    let value = row.push_state === 3 ? true : false;
    this.setState({
      showDetailVariable: false,
      tabKey: "1",
      statistivarable: value
    });
    // 推稿数据
    this.props.dispatch({
      type: "draftlist/getPushedDraftData",
      payload: {
        id: row.id,
        page: 1,
        per_page: 1000
      }
    });
    // 内容
    this.props.dispatch({
      type: "draftlist/getContentDetailsOther",
      payload: {
        id: row.id
      }
    });
  };
  // 跳转至详情
  showDetailChange = row => {
    let value = row.push_state === 3 ? true : false;
    this.setState({
      showDetailVariable: false,
      tabKey: "2",
      statistivarable: value
    });
    // 推稿数据
    this.props.dispatch({
      type: "draftlist/getPushedDraftData",
      payload: {
        id: row.id,
        page: 1,
        per_page: 1000
      }
    });
    // 统计数据
    this.props.dispatch({
      type: "draftlist/getDetailesStatisticalData",
      payload: {
        site_id: row.site_id,
        content_type: row.content_type,
        content_id: row.content_id,
        source: 0
      }
    });
    // 内容
    this.props.dispatch({
      type: "draftlist/getContentDetailsOther",
      payload: {
        id: row.id
      }
    });
  };
  // 打开新建稿件页面
  showModal = () => {
    sessionStorage.setItem("mchType", "add");
    this.props.dispatch({ type: "add/saveMchType", data: "add" });
    let url;
    if (window.location.origin.indexOf("localhost") > -1) {
      url = window.location.origin + "?level=1#/Add";
    } else {
      url = window.location.origin + window.location.pathname + "?level=1#/Add";
    }
    window.open(url);
  };
  // 发稿
  showpushConfirm = row => {
    let that = this;
    confirm({
      title: "发稿",
      content: "是否确认发稿？",
      onOk: async () => {
        const result = that.props.dispatch({
          type: "draftlist/releaseDrafcheck",
          payload: {
            id: row.id,
            push_status: 0
          }
        });
        if (result) {
          that.getTableData();
        }
      },
      onCancel() {
        message.warning("取消操作");
      },
      cancelText: "取消",
      okText: "确定"
    });
  };
  // 返回上一级
  goBack = () => {
    this.setState({
      showDetailVariable: true
    });
  };
  // 跳转至编辑页
  showeditorPage = editorRow => {
    sessionStorage.setItem("mchType", "editor");
    sessionStorage.setItem("editorRow", JSON.stringify(editorRow));
    this.props.dispatch({ type: "add/saveMchType", data: "editor" });
    this.props.dispatch({
      type: "add/setActiveKey",
      data: String(editorRow.content_type)
    });
    let url;
    if (window.location.origin.indexOf("localhost") > -1) {
      url = window.location.origin + "?level=1#/Add";
    } else {
      url = window.location.origin + window.location.pathname + "?level=1#/Add";
    }
    window.open(url);
  };
  render() {
    const { tableLoading } = this.state;
    const { tableData, total, detail, pushedTableData, statistiData } = this.props.draftlist;
    // 表格表头
    const columns = [
      {
        title: "标题",
        dataIndex: "title",
        key: "title",
        align: "center"
      },
      {
        title: "类型",
        dataIndex: "content_type",
        key: "content_type",
        align: "center",
        render: (text, record) => {
          if (text === 1) {
            return "文章";
          } else if (text === 2) {
            return "图集";
          } else if (text === 4) {
            return "视频";
          } else {
            return "音频";
          }
        }
      },
      {
        title: "发布站点",
        dataIndex: "site_name",
        key: "site_name",
        align: "center"
      },
      {
        title: "稿件状态",
        dataIndex: "push_status",
        key: "push_status",
        align: "center",
        render: (text, record, index) => {
          if (text === 0 && record.push_state === 0) {
            return <span style={{ color: "#f9be71" }}>发稿待审核</span>;
          } else if (text === 3 && record.push_state === 0) {
            return <span style={{ color: "#f9be71" }}>推稿待审核</span>;
          } else if (text === 1 && record.push_state === 0) {
            return "发稿初审通过";
          } else if (text === 3 && record.push_state === 1) {
            return "推稿初审通过";
          } else if (text === 2 && record.push_state === 0) {
            return "发稿二审通过";
          } else if (text === 3 && record.push_state === 2) {
            return "推稿二审通过";
          } else if (text === 3 && record.push_state === 0) {
            return "已发稿";
          } else if (text === 3 && record.push_state === 3) {
            return "已推送";
          } else if (text === 4 && record.push_state === 0) {
            return <span style={{ color: "red" }}>发稿审核不通过</span>;
          } else if (text === 3 && record.push_state === 4) {
            return <span style={{ color: "red" }}>推稿审核不通过</span>;
          } else {
            return <span style={{ color: "#f9be71" }}>草稿</span>;
          }
        }
      },
      {
        title: "推送时间",
        dataIndex: "push_time",
        key: "push_time",
        align: "center"
      },
      {
        title: "操作",
        key: "action",
        align: "center",
        render: (text, record) => {
          if (record.push_status === 10) {
            return (
              <div style={{ marginRight: 100, textAlign: "right" }}>
                <span style={{ cursor: "pointer", color: "#1890ff" }} onClick={this.showpushConfirm.bind(this, record)}>
                  发稿&nbsp;&nbsp;
                </span>
                <span style={{ cursor: "pointer", color: "#1890ff" }} onClick={this.showeditorPage.bind(this, record)}>
                  编辑&nbsp;&nbsp;
                </span>
                <span style={{ cursor: "pointer", color: "#1890ff" }} onClick={this.showDetailChange.bind(this, record)}>
                  查看详情
                </span>
              </div>
            );
          } else if (record.push_state === 3) {
            return (
              <div style={{ marginRight: 100, textAlign: "right" }}>
                <span style={{ cursor: "pointer", color: "#1890ff" }} onClick={this.showPushedData.bind(this, record, true)}>
                  推送数据&nbsp;&nbsp;
                </span>
                <span style={{ cursor: "pointer", color: "#1890ff" }} onClick={this.showDetailChange.bind(this, record)}>
                  查看详情
                </span>
              </div>
            );
          } else {
            return (
              <div style={{ marginRight: 100, textAlign: "right" }}>
                <span style={{ cursor: "pointer", color: "#1890ff" }} onClick={this.showDetailChange.bind(this, record)}>
                  查看详情
                </span>
              </div>
            );
          }
        }
      }
    ];
    // 表格分页器配置项
    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      total: total,
      showTotal: () => `共 ${total} 条记录`,
      pageSize: this.state.pageSize,
      pageSizeOptions: ["5", "10", "20", "50"],
      onChange: this.currentPageChange,
      onShowSizeChange: this.pageSizeChange
    };
    return (
      <QueueAnim className="DraftList">
        <div key="t2" className="BasicContent">
          <div className="main">
            {this.state.showDetailVariable ? (
              <div>
                <Button type="primary" onClick={this.showModal} style={{ marginBottom: 20 }}>
                  新建稿件
                </Button>
                <TagSelect
                  currentCategory={[this.state.category]}
                  showAllDelVariable={false}
                  getcategoryChange={this.categoryChange}
                  getSelectedTimeChange={this.selectedTimeChange}
                  handleSeachButton={this.handleSeachButton}
                />
                <Table loading={tableLoading} rowKey={recored => recored.id} columns={columns} dataSource={tableData} bordered pagination={paginationProps} />
              </div>
            ) : (
              <PushedTab
                statistivarable={this.state.statistivarable}
                TableData={pushedTableData}
                statisticalData={statistiData}
                parentBack={this.goBack}
                contentData={detail}
                tabKey={this.state.tabKey}
              />
            )}
          </div>
        </div>
      </QueueAnim>
    );
  }
}

export default DraftList;
